<template>
  <div>
    <el-form
      class="query-table-form"
      ref="form"
      :inline="true"
      :model="model"
      :rules="rules"
      v-if="!isView"
    >
      <el-form-item prop="attachment_type">
        <el-input placeholder="标签名称" v-model="model.attachment_type"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-plus" @click="handlerAddTag">添加标签</el-button>
      </el-form-item>
    </el-form>
    <div class="card p-3">
      <attach-upload
        :tags="uploadTags"
        batch-no="sys-admin"
        :view-mode="isView"
        v-bind="$listeners"
        ref="upload"
        @after-data="handleAfterData"
      ></attach-upload>
    </div>
  </div>
</template>

<script>
import AttachUpload from '@/bank/components/attach/Upload'

export default {
  components: {
    AttachUpload,
  },
  props: {
    viewMode: Boolean,
  },
  data() {
    return {
      loading: false,
      model: {
        attachment_type: '',
      },
      rules: {
        attachment_type: { required: true, message: '请输入标签名称', trigger: 'blur' },
      },
      attachs: [],
      uploadTags: [],
    }
  },
  computed: {
    isView() {
      return this.viewMode
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handlerAddTag() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const isExit = this.uploadTags.find(item => item.tag === this.model.attachment_type)
          if (!isExit) {
            this.uploadTags.push({
              parentTag: '系统附件',
              tag: this.model.attachment_type,
              required: false,
            })
          } else {
            this.$message.warning('标签名称已存在！')
          }
        } else {
          this.$message.warning('请输入需要添加的标签名称')
        }
      })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },

    handleAfterData({ list }) {
      this.uploadTags = []
      list.reduce((e, i) => {
        if (!e[i.attachment_type]) {
          e[i.attachment_type] = i.attachment_type
          this.uploadTags.push({
            parentTag: '系统附件',
            tag: i.attachment_type,
            required: false,
          })
        }
        return e
      }, {})
    },
  },
}
</script>

<style lang="scss" scoped>
.attach-title {
  font-size: 1.1rem;
  font-weight: bold;
}
</style>
